<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<!--底部按钮2的布局样式-->
		<view class="  commoncss2   " style="position: fixed;bottom: 0px;z-index: 345;width: 100%;border-bottom: 2rpx solid #eee;">
			<view class="cu-bar tabbar ">
				<view class="action" @tap="showModal" data-target="bottomModal" v-for="(item,index) in label2List">
					<view class="cuIcon-cu-image">
						<image v-show="item.imgtype !=2" :src="item.pic" class="" style="width: 50rpx;height:50rpx;">
						</image>
						<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]"
							style="font-size: 60rpx;margin-top: 0rpx;"></view>
					</view>
					<view class="text-green">{{item.name}}</view>
				</view>
			</view>
		</view>

		<!--图片轮播3的布局样式-->
		<view class="  commoncss3   ">
			<swiper class="screen-swiper square-dot" style="min-height: 360rpx;" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item v-for="(item,index) in goodsPics" :key="index">
					<image :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>


		<view class="goodsTab bg-white">
			<view class="goodsName"> {{goods.name}}</view>
			<view class="minPrice"> ￥{{goods.minPrice}}</view>
			<view class="goodsName"> 发货地址: 四川成都</view>
			<view class="goodsName"> 保障: 正品保障，假一陪四，七天无理由退换</view>
		</view>


		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 商品详情
			</view>
		</view>
		<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
			<!-- 	<rich-text :nodes="aboutText"></rich-text> -->
			<view v-html="goods.details"></view>
			<view v-html="goods.details"></view> 
		</view>

		<!-- 底部窗口 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">

					<radio-group class="block" @change="RadioChange">
						<view class="cu-form-group" v-for="(item,index) in goods.goodsSpecsList">
							<view class="title">
								<text>{{item.specsName}} - </text>
								<text style="color: #ff5500">￥{{item.specsPrice}}</text>
							</view>
							<radio :value="item.id" :checked="item.id==goodsSpecsId"></radio>
						</view>
					</radio-group>

					<view style="margin-top: 5%;" class="cu-form-group">
						<view class="title">购买数量</view>
						<input placeholder="1" :value="num" @input="change"></input>
					</view>

					<view style="margin-left: 45%;"><text>总价: </text> <text class="minPrice">
							￥{{priceCalculationData.totalPrice}} </text></view>
					<view style="margin-top: 5%;">
						<button style="margin-left: 0%;" class="cu-btn lg bg-orange" @tap="shoppingCart">加入购物车</button>
						<button style="margin-left: 40%;" class="cu-btn lg bg-orange" @tap="placeAnOrder">下单</button>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {
					goodsSpecsList: []
				},
				goodsPics: [],
				modalName: null,
				goodsSpecsId: "",
				//radio: "",
				num: 1,
				// 价格计算价格
				priceCalculationData: {},
				// 底部按钮
				label2List: [{
					"name": "加入购物车",
					"imgtype": 2,
					"iconcolor": "orange",
					"iconname": "cartfill",
					"pic": "https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png",
					"url": "",
					"image": "https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png"
				}, {
					"name": "下单",
					"imgtype": 2,
					"iconcolor": "olive",
					"iconname": "check",
					"pic": "https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220426\/d5d01475c210e46c357cf3ffaea47535.png",
					"url": ""
				}],
			}
		},
		onLoad(option) {
			this.crud.get(this.path, "/api/client/all/goods/" + option.id).then(res => {
				//this.crud.get(this.path, "/api/client/all/goods/1367005614109028353").then(res => {
				this.goods = res.data.data;
				this.goodsPics = this.goods.pics.split(",");
				// 处理富文本图片溢出
				this.goods.details = this.goods.details.replace(/\<img/g, "<img style='width: 100%;'")
			})
		},
		methods: {
			/**
			 * 弹出选择
			 */
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				// 默认选周第一个规格
				this.goodsSpecsId = this.goods.goodsSpecsList[0].id;
				this.priceCalculation();
			},
			hideModal(e) {
				this.modalName = null
			},
			/**
			 * 规格单选切换
			 */
			RadioChange(e) {
				this.goodsSpecsId = e.detail.value
				this.priceCalculation();
			},

			/**
			 * 数量被改变
			 */
			change(e) {
				this.num = e.detail.value
				this.priceCalculation();
			},

			/**
			 * 价格计算
			 */
			priceCalculation() {
				this.crud.post(this.path, "/api/client/all/order/priceCalculation", [{
					goodsSpecsId: this.goodsSpecsId,
					num: this.num
				}]).then((res) => {
					this.priceCalculationData = res.data.data
				})
			},
			/**
			 * 加入购物车
			 */
			shoppingCart() {
				this.crud.post(this.path, "/api/client/all/shoppingCart", {
					goodsSpecsId: this.goodsSpecsId,
					num: this.num
				}).then((res) => {
					// 关闭弹出并加载提示
					this.modalName = null
					if (res.data.code == 200) {
						uni.showToast({
							title: "商品加入购物车成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 下单，打开订单页
			 */
			placeAnOrder() {
				// 去结算的商品规格+数量
				let orderSpecses = [];
				orderSpecses.push({
					goodsSpecsId: this.goodsSpecsId,
					num: this.num
				})
				uni.setStorageSync('orderSpecses', orderSpecses);
				uni.navigateTo({
					url: "/pages/fpage1/goods/createOrder",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.goodsTab {
		height: 300rpx;
	}

	.goodsName {
		text-align: left;
		padding-top: 4%;
		margin-left: 2%;
	}

	.minPrice {
		text-align: left;
		margin-top: 2%;
		margin-left: 2%;
		color: #ff5500;
	}

	.goodsSpecsList {
		/* text-align: right; */
		color: #ff5500;
		margin-left: 5%;
	}



	page {
		background-color: #F8F9FB;
	}



	/**本页全局配置的代码**/
	.pageconfig {

		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}


	/**pagedomcss**/


	/**本页底部按钮2的css代码**/
	.commoncss2 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**本页图片轮播3的css代码**/
	.commoncss3 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}
</style>
